<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>createElement基本参数</title>
</head>
<body>

    <div id="app">
        <ele></ele>
    </div>

    <script src="./utils/vue.min.js"></script>

    <script>
        //全局注册组件

        //组件是一个javascript object主要包含：template or render function、data 和 methods几个属性；

        // Vue.component('ele',{
        //     template:'\
        //     <div  id = "element" \
        //     :class = "{show: show}" \
        //     @click = "handleClick">文本内容</div>',
        //     data: function () {
        //         return {
        //             show: true
        //         }
        //     },
        //     methods:{
        //         handleClick: function () {
        //             console.log('clicked!');
        //         }
        //     }
        // });

        //使用render改写传统的template写法
        Vue.component('ele',{
            render: function (createElement) {
                return createElement(
                    'div',
                    {
                        class: {show: this.show},
                        attrs: {id: "element"},
                        on: {click: this.handleClick}
                    },
                    '文本内容'
                );
            },
            data: function () {
                return {
                    show: true
                };
            },
            methods: {
                handleClick: function () 
                {
                    console.log('clicked!');
                }
            }
        });

        var app = new Vue({
            el: '#app'
        });

    </script>

</body>
</html>